<!DOCTYPE html>
<html lang="cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>轮播列表</title>
    <link th:href="@{/frame/layui/css/layui.css}" rel="stylesheet">
</head>
<body>
<div class="layui-fluid">
    <table id="bannerstable" lay-filter="bannerstable"></table>
</div>
<div style="display: none;padding-right: 20px;" id="addbanner">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4">
            <label class="layui-form-label-col" style="padding-left: 15px;">关联文档编号：</label>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input class="layui-input" id="inputdocid">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-upload">
        <div class="layui-upload-list">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md8 layui-col-md-offset2">
                    <img class="layui-upload-img" id="demo1" style="width: 100%;height: auto;">
                </div>
            </div>
            <p id="demoText"></p>
        </div>
    </div>
    <div class="layui-row layui-col-space15" align="center">
        <button class="layui-btn layui-btn-normal" id="selectpic">选择图片</button>
        <button class="layui-btn layui-btn-normal" id="doupload" style="display: none">添加轮播图</button>
    </div>
</div>
<script type="text/javascript" th:src="@{/frame/layui/layui.js}"></script>
<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addAdmin">添加轮播图</button>
    </div>
</script>
<script id="showAvatar" type="text/html">
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="avartatPreview">查看图片</a>
</script>
<script id="switchTpl" type="text/html">
    <input type="checkbox" name="status" value="{{d.bannerid}}" lay-skin="switch" lay-text="正常|下架" lay-filter="banadmin"
           {{ d.status== '正常' ? 'checked' : '' }}>
</script>
<script>
    layui.use(['table', 'layer','upload'], function () {
        const table = layui.table;
        const upload = layui.upload;
        const $ = layui.$;
        const form = layui.form;
        table.render({
            // 绑定的table元素
            elem: '#bannerstable'
            // 异步数据接口
            , url: '[[@{/banner/admin/getAllBanners}]]'
            // 访问方式
            , method: 'post'
            // 分页切换时显示加载层
            , loading: true
            // 分页请求参数名
            , request: {
                pageName: 'index',
                limitName: 'pageSize'
            }
            // 开启分页
            , page: true
            , toolbar: '#toolbarDemo'
            , title: '管理员列表'
            , cols: [ [
                {align: 'center', type: 'checkbox', fixed: 'left'},
                {align: 'center', field: 'bannerid', title: '轮播图编号'},
                {align: 'center', title: '文档编号',templet:"<div>{{d.document.docid}}</div>"},
                {align: 'center', field: 'picurl', title: '图片',templet: '#showAvatar'},
                {align: 'center', title: '发布者',templet:"<div>{{d.auditor.adminid}}</div>"},
                {align: 'center', field: 'status', title: '状态', templet: '#switchTpl'}
            ] ]
        });
        form.on('switch(banadmin)', function (obj) {
            // layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
            $.post('[[@{/banner/admin/changeStatus}]]', {
                bannerid: this.value,
                status: obj.elem.checked ? '正常' : '下架'
            }, function (res) {
                layer.msg(res.msg);
            });
        });

        // 头工具栏事件
        table.on('toolbar(bannerstable)', function (obj) {
            const checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'addAdmin':
                    layer.open({
                        type: 1,
                        title: '添加轮播图',
                        content: $('#addbanner'),
                        area: ['500px', '300px']
                    });
                    break;
            }
        });

        // 行工具栏事件
        table.on('tool(bannerstable)', function (obj) {
            const data = obj.data;
            switch (obj.event) {
                case 'avartatPreview':
                    layer.photos({
                        photos: {title: "查看图片", data: [{src: '[[@{/picture/getBanner}]]?fileName='+data.picurl}]},
                        shade: .01,
                        closeBtn: 1,
                        anim: 5
                    });
                    break;
            }
        });

        //上传图片
        upload.render({
            elem:'#selectpic'
            ,url:'[[@{/banner/admin/addBanner}]]'
            ,auto:false
            ,bindAction:'#doupload'
            ,data:{
                //轮播图绑定的文档编号
                docid:function () {
                    return $('#inputdocid').val();
                }
            }
            //图片预览
            ,choose:function (obj) {
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result);
                });
                $('#doupload').show();
                $('#selectpic').hide();
            }
            //添加轮播图成功后的回调
            ,done:function(res, index, upload){
                $('#doupload').hide();
                $('#selectpic').show();
                layer.msg(res.msg,{time:2000},function () {
                    layer.closeAll();
                });
            }
        });
    });
</script>
</body>
</html>